<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布二手物品 - 校园二手交易平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .navbar {
            background-color: #4a6fa5;
        }
        .navbar-brand, .nav-link {
            color: white !important;
        }
        .footer {
            background-color: #4a6fa5;
            color: white;
            padding: 20px 0;
            margin-top: 40px;
        }
        .card {
            border-radius: 10px;
        }
        .form-label {
            font-weight: 500;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="index.html">校园二手交易平台</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="javascript:void(0)" onclick="window.location.href='index.html'">学习用品</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="javascript:void(0)" onclick="window.location.href='index.html'">生活用品</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="post.html">发布物品</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <div class="container mt-5">
        <h1 class="mb-4 text-center">发布二手物品</h1>
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card p-5 shadow-lg">
                    <form id="postForm" onsubmit="submitForm(event)">
                        <div class="mb-3">
                            <label for="name" class="form-label">商品名称*</label>
                            <input type="text" class="form-control" id="name" name="name" required placeholder="请输入商品名称">
                        </div>
                        <div class="mb-3">
                            <label for="price" class="form-label">价格 (¥)*</label>
                            <input type="number" step="0.01" class="form-control" id="price" name="price" required placeholder="请输入价格">
                        </div>
                        <div class="mb-3">
                            <label for="category" class="form-label">分类*</label>
                            <select class="form-control" id="category" name="category" required>
                                <option value="" disabled selected>请选择分类</option>
                                <option value="学习用品">学习用品（教材、文具等）</option>
                                <option value="生活用品">生活用品（小家电、护肤品等）</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="description" class="form-label">商品描述*</label>
                            <textarea class="form-control" id="description" name="description" rows="3" required placeholder="请描述商品的新旧程度、使用情况等信息"></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="contact" class="form-label">联系方式*</label>
                            <input type="text" class="form-control" id="contact" name="contact" required placeholder="请输入QQ或微信号码">
                        </div>
                        <div class="mb-3">
                            <label for="image" class="form-label">商品图片（选填）</label>
                            <input type="file" class="form-control" id="image" name="image" accept="image/*">
                            <div class="form-text">支持JPG、PNG等图片格式，建议上传清晰的实物照片</div>
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary btn-lg px-5">发布商品</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 成功提示模态框 -->
    <div class="modal fade" id="successModal" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title" id="successModalLabel">发布成功！</h5>
                </div>
                <div class="modal-body">
                    <p>您的商品已成功发布！系统已自动为您生成商品预览。</p>
                    <div class="card mt-3" style="max-width: 100%;">
                        <div class="row g-0">
                            <div class="col-md-4">
                                <img id="previewImage" src="https://via.placeholder.com/200x200?text=暂无图片" class="img-fluid rounded-start" alt="商品预览">
                            </div>
                            <div class="col-md-8">
                                <div class="card-body">
                                    <h6 class="card-title" id="previewName">商品名称</h6>
                                    <p class="card-text text-danger font-weight-bold" id="previewPrice">¥0.00</p>
                                    <p class="card-text" id="previewDescription" style="font-size: 0.9rem;">商品描述</p>
                                    <p class="card-text text-muted" style="font-size: 0.9rem;" id="previewContact">联系方式</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="window.location.href='post.html'">继续发布</button>
                    <button type="button" class="btn btn-primary" onclick="window.location.href='index.html'">返回首页</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 --<footer class="footer">
        <div class="container text-center">
            <p>&copy; 2024 校园二手交易平台 - 让闲置物品流动起来</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function submitForm(event) {
            event.preventDefault();
            
            // 获取表单数据
            const name = document.getElementById('name').value;
            const price = document.getElementById('price').value;
            const category = document.getElementById('category').value;
            const description = document.getElementById('description').value;
            const contact = document.getElementById('contact').value;
            const imageInput = document.getElementById('image');
            
            // 在实际项目中，这里应该发送AJAX请求到后端
            // 但由于是静态页面，我们只做前端模拟
            
            // 更新预览信息
            document.getElementById('previewName').textContent = name;
            document.getElementById('previewPrice').textContent = `¥${parseFloat(price).toFixed(2)}`;
            document.getElementById('previewDescription').textContent = description;
            document.getElementById('previewContact').textContent = `联系方式: ${contact}`;
            
            // 如果有上传图片，显示预览
            if (imageInput.files && imageInput.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('previewImage').src = e.target.result;
                }
                reader.readAsDataURL(imageInput.files[0]);
            } else {
                document.getElementById('previewImage').src = `https://via.placeholder.com/200x200?text=${encodeURIComponent(name)}`;
            }
            
            // 显示成功模态框
            const successModal = new bootstrap.Modal(document.getElementById('successModal'));
            successModal.show();
        }
    </script>
</body>
</html